<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<div class="flex col-center row-between pb25 border-bottom pl20 pr20 pt25">
				<span class="fb fs16">通知列表</span>
				<el-button link :disabled="multiple" @click="allocationFormSub(0)"
					v-hasPermi="['notification:edit']">
					<span class="main-color fs14">全部标记为已读</span>
				</el-button>
			</div>
			<div class=" p20">
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="100" align="left" :selectable="selectable" />
					<el-table-column label="通知" align="left" prop="title" width="500">
						<template #default="scope">
							<span class="cursor main-color underline" @click="operate(scope.row,scope.$index)">{{scope.row.title}}</span>
						</template>
					</el-table-column>
					<el-table-column label="接收时间" align="center" prop="receiveTime" width="120" />
					<el-table-column label="状态" align="center" prop="commonRegion">
						<template v-slot="scope">
							<div class="flex col-center row-center">
								<span class="dot mr5"
									:class="[{'bg-0ACC9C':scope.row.status == 0},{'bg-e3e3e3':scope.row.status == 1}]"></span>
								{{scope.row.status == 0 ? '已读' :'未读'}}
							</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="100">
						<template v-slot="scope">
							<el-button size="mini" type="text" @click="getDetail(scope.row.id,scope.$index)"
								v-hasPermi="['notification:remove']">详情</el-button>
							<el-button size="mini" type="text" @click="handleDelete(scope.row)"
								v-hasPermi="['notification:remove']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getList" />
			</div>
		</div>
		<el-dialog title="通知详情" center v-model="dialogVisible" width="30%" :before-close="handleClose">
			<div class="content">
				<div>
					<span class="fb">标题：</span>{{info.title}}
				</div>
				<div>
					<span class="fb">类型：</span>{{statusFunc(info.dataType)}}
				</div>
				<div>
					<span class="fb">内容：</span>{{info.content}}
				</div>
				<div>
					<span class="fb">发送时间：</span>{{info.sendTime}}
				</div>
			</div>
			<div slot="footer" class="dialog-footer text-right">
				<el-button class="cancelSubBtn" @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" class="mainSubBtn" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script name="noticeList">
	import {
		noticeList, //列表
		updateStatus, //标记已读
		noticeDel, //删除
		noticeDetail //详情
	} from "@/api/business/notice";
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				}, //查询参数
				multiple: true,
				dialogVisible: false,
				info:{},
				ids:[]
			}
		},
		created() {
			this.getList()
		},
		methods: {
			statusFunc(val){
				// 1=客户2=订单3=跟进计划提醒
				switch (val*1){
					case 1:
						return '客户'
						break;
					case 2:
						return '订单'
						break;
					case 3:
						return '跟进计划提醒'
						break;		
					default:
						break;
				}
			},
			handleClose() {
				this.dialogVisible = false
			},
			selectable(row) {
				if (row.status == 0) {
					return false;
				} else {
					return true;
				}
			},
			//查询列表
			getList() {
				this.loading = true;
				noticeList(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
					for(let key in this.list){
						if(this.list[key].status == '1'){
							this.multiple = false
						}
					}
				});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.multiple = !selection.length;
			},
			// 标记已读
			allocationFormSub(row) {
				if(row == 0){
					// this.ids = this.list.map((item) => item.id);
					let length = 0
					for(let key in this.list){
						if(this.list[key].status == '1'){
							length += 1
							this.ids = this.list[key].id
						}
					}
					if(length == 0){
						this.$modal.msgSuccess("已全部已读");
						return false;
					}
				}
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认已读？')
					.then(function() {
						updateStatus(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			// 删除
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除产品编号为"' + ids + '"的数据项？')
					.then(function() {
						noticeDel(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			// 详情
			getDetail(id,index) {
				noticeDetail(id).then(res => {
					this.info = res.data
					this.dialogVisible = true
					this.list[index].status = '0'
				})
			},
			operate(row,index){
				//dataType: 1=客户2=订单3=跟进计划提醒
				if(row.dataType == 1){
					this.$router.push('/peoples/customer/portrait/user/'+row.operModuleId)
				}else if(row.dataType == 2){
					this.$router.push('/order/myOrder')
				}else if(row.dataType == 3){
					this.$router.push('/peoples/followup_plan')
				}
			}
		}
	}
</script>
<style>
	.dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}

	.bg-0ACC9C {
		background-color: #0ACC9C;
	}

	.bg-e3e3e3 {
		background-color: #e3e3e3;
	}
	.content{
		color: #333;
		line-height: 32px;
		font-size: 15px;
		padding: 10px;
	}
	.underline{
		text-decoration: underline;
	}
</style>